<template>
  <div class="box-main">
    <div class="topHeaderCard" v-if="!showDetail && !showPatientInfo">
      <!-- <a-button type="primary" @click="resetBack" :icon="h(ArrowLeftOutlined)" ghost>
        返回
      </a-button> -->
      <a-breadcrumb class="breadcrumb" v-if="breadcrumbShow">
        <a-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index">
          <span
            :class="item.isUrl == true ? 'on' : ''"
            @click="resetBack"
            v-if="item.isUrl == true"
            >{{ item.name }}</span
          >
          <span v-else>{{ item.name }}</span>
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div
      :class="['page-content', breadcrumbShow == true ? 'on' : '']"
      v-if="!showDetail && !showPatientInfo"
    >
      <a-card :class="breadcrumbShow == true ? 'page-content-Wrap' : 'page-content-Wrap-two'">
        <div class="header">
          <template v-if="!enterpriseShowThree">
            <Condition
              :condition="condition"
              :btns="['search', 'reset']"
              @search="searchHandle"
              @reset="reset"
            >
              <!-- <a-form-item>
                <a-button type="primary" v-if="raidoValue == 'todo'" @click="batchDispatch"
                  >批量派单</a-button
                >
                <a-button type="primary" v-else @click="batchTransfer">批量转单</a-button>
              </a-form-item> -->
            </Condition>
          </template>
          <template v-else>
            <Condition
              :condition="conditionEnterprise"
              :btns="['search', 'reset']"
              @search="searchHandle"
              @reset="reset"
            >
              <!-- <a-form-item>
                <a-button type="primary" v-if="raidoValue == 'todo'" @click="batchDispatch"
                  >批量派单</a-button
                >
                <a-button type="primary" v-else @click="batchTransfer">批量转单</a-button>
              </a-form-item> -->
            </Condition>
          </template>
          <div class="tabEnterprise">
            <p
              :class="tabEnterpriseDataActive == index ? 'on' : ''"
              v-for="(item, index) in tabEnterpriseData"
              :key="index"
              @click="tabEnterpriseDataCli(item, index)"
            >
              {{ item.name }}
            </p>
          </div>
          <div style="display: flex; align-items: center; justify-content: space-between">
            <a-radio-group
              button-style="solid"
              v-model:value="raidoValue"
              @change="radioValueChange"
            >
              <a-radio-button value="todo">
                {{ tabEnterpriseDataActive == 0 ? '待派单' : '待分配' }}({{
                  dispatchAllCounts ? dispatchAllCounts.noSend : 0
                }})
              </a-radio-button>
              <a-radio-button value="done">
                {{ tabEnterpriseDataActive == 0 ? '已派单' : '已分配' }}({{
                  dispatchAllCounts ? dispatchAllCounts.send : 0
                }})
              </a-radio-button>
            </a-radio-group>
            <div v-if="enterpriseShow == true">
              <a-button type="primary" v-if="raidoValue == 'todo'" @click="batchDispatch">{{
                tabEnterpriseDataActive == 0 ? '批量派单' : '批量分配'
              }}</a-button>
              <a-button type="primary" v-else @click="batchTransfer">批量转单</a-button>
            </div>
          </div>
          <!-- <span> 共筛选出 {{ pagination.total }} 条数据 </span> -->
        </div>
        <div class="main">
          <a-table
            class="table"
            size="small"
            :loading="loading"
            :dataSource="List"
            :columns="columns"
            :pagination="pagination"
            @change="paginationChange"
            :sticky="{ offsetHeader: 0 }"
            :rowKey="'empi'"
            :row-selection="
              enterpriseShow
                ? {
                    getCheckboxProps: getCheckboxProps,
                    selectedRowKeys: state.selectedRowKeys,
                    onChange: onSelectChange
                  }
                : undefined
            "
          >
            <!-- :row-selection="enterpriseShow ? rowSelection : undefined" -->
            <!-- :row-selection="
              enterpriseShow
                ? { selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }
                : undefined
            " -->
            <!-- <template #bodyCell="{ column, text, record, index }"> -->
            <template #bodyCell="{ column, record, index }">
              <template v-if="column.dataIndex == 'no'">
                {{ (pagination.current - 1) * pagination.pageSize + index + 1 }}
              </template>
              <template v-else-if="column.dataIndex === 'patName'">
                <span class="patName" @click="toDetail(record)" type="link">
                  {{ record.patName }} {{ record.gender }} {{ record.age }}
                </span>
                <!-- <a-button @click="toDetail(record)" type="link">{{ record.patName }}</a-button> -->
              </template>

              <template v-else-if="column.dataIndex === 'memberState'">
                <a-tag
                  v-if="record.memberState == '生效中'"
                  style="color: #00b42a; background-color: #e8f7ff; border: 1px solid #00b42a"
                >
                  生效中
                </a-tag>
                <a-tag
                  v-if="record.memberState == '已中止'"
                  style="color: #1d2129; background-color: #f2f3f5; border: 1px solid #1d2129"
                >
                  已中止
                </a-tag>
                <a-tag
                  v-if="record.memberState == '已过期'"
                  style="color: #1d2129; background-color: #f2f3f5; border: 1px solid #1d2129"
                >
                  已过期
                </a-tag>
              </template>
              <template v-else-if="column.dataIndex == 'buyTime'">
                <span v-if="record.buyTime">{{
                  dayjs(record.buyTime).format('YYYY-MM-DD HH:mm')
                }}</span>
                ~
                <span v-if="record.expiredTime">{{
                  dayjs(record.expiredTime).format('YYYY-MM-DD HH:mm')
                }}</span>
              </template>
              <template v-else-if="column.dataIndex === 'vipStartTime'">
                <span v-if="record.vipStartTime">{{
                  dayjs(record.vipStartTime).format('YYYY-MM-DD HH:mm')
                }}</span>
                ~
                <span v-if="record.expiredTime">{{
                  dayjs(record.expiredTime).format('YYYY-MM-DD HH:mm')
                }}</span>
              </template>
              <template v-else-if="column.dataIndex === 'questionnaireRecordId'">
                <a-button
                  type="link"
                  :disabled="!record.questionnaireRecordId"
                  @click="questionAnswerForm(record)"
                  >检后问卷</a-button
                >
              </template>
              <!-- <template v-else-if="column.dataIndex === 'questionState'">
                <span style="color: #00b42a" v-if="record.questionState">
                  <CheckCircleFilled two-tone-color="#00B42A" />
                  已填写
                </span>
                <span style="color: #f53f3f" v-if="!record.questionState">
                  <ExclamationCircleFilled two-tone-color="#F53F3F" />
                  未填写
                </span>
              </template> -->
              <template v-else-if="column.dataIndex === 'pathName'">
                <span v-if="record.pathName && raidoValue == 'todo'">{{ record.pathName }}</span>
                <span
                  style="color: #1677ff; cursor: pointer"
                  v-else-if="record.pathName && raidoValue == 'done'"
                  @click="addOrUpdateHandle(record)"
                  type="link"
                >
                  {{ record.pathName }}
                </span>
                <span v-else>/</span>
              </template>
              <template v-else-if="column.dataIndex === 'isLogin'">
                <span style="color: #00b42a" v-if="record.isLogin">
                  <CheckCircleFilled two-tone-color="#00B42A" />
                  已注册
                </span>
                <span style="color: #f53f3f" v-if="!record.isLogin">
                  <ExclamationCircleFilled two-tone-color="#F53F3F" />
                  未注册
                </span>
              </template>
              <template v-else-if="column.dataIndex === 'serviceState'">
                <span style="color: #ff7d00" v-if="record.serviceState == 'TODO'">
                  <ExclamationCircleFilled two-tone-color="#FF7D00" />
                  待执行
                </span>
                <span style="color: #3491fa" v-if="record.serviceState == 'DOING'">
                  <ExclamationCircleFilled two-tone-color="#3491FA" />
                  处理中
                </span>
                <span style="color: #3491fa" v-if="record.serviceState == 'REPROCESSING'">
                  <ExclamationCircleFilled two-tone-color="#3491FA" />
                  处理中
                </span>
                <span style="color: #0fc6c2" v-if="record.serviceState == 'DONE'">
                  <CheckCircleFilled two-tone-color="#0FC6C2" />
                  已推送
                </span>
                <span style="color: #1d2129" v-if="record.serviceState == 'EXPIRED'">
                  <ExclamationCircleFilled two-tone-color="#1d2129" />
                  已过期
                </span>
              </template>

              <template v-else-if="column.dataIndex === 'action'">
                <a-button
                  v-if="enterpriseShowThree == false"
                  type="link"
                  @click="dispatchHandle(record)"
                  :disabled="record.memberState != '生效中'"
                  >{{ raidoValue == 'todo' ? '派单' : '转单' }}</a-button
                >
                <a-button
                  v-else-if="zuzhangShow == true"
                  type="link"
                  @click="dispatchHandle(record)"
                  :disabled="record.memberState != '生效中'"
                  >{{ raidoValue == 'todo' ? '分配' : '转单' }}</a-button
                >
                <!-- <a-button
                  v-if="tabEnterpriseDataActive == 1"
                  type="link"
                  @click="dispatchHandle(record)"
                  >体检员工</a-button
                > -->
              </template>
            </template>
          </a-table>
        </div>
      </a-card>

      <a-modal v-model:open="dispatchOpen" :title="dispatchTitle" :mask-closable="false">
        <a-form ref="dispatchFormRef" :model="dispatchForm">
          <a-form-item
            label="选择负责人"
            name="dispatchUserId"
            :rules="[{ required: true, message: '请选择负责人' }]"
          >
            <a-select
              v-model:value="dispatchForm.dispatchUserId"
              style="width: 100%"
              placeholder="请选择负责人"
              showSearch
              :options="managerData"
            />
          </a-form-item>
        </a-form>
        <template #footer>
          <a-button key="back" @click="dispatchOpen = false">取消</a-button>
          <a-button key="submit" type="primary" @click="saveHandle" :loading="dispatchLoading">
            确定
          </a-button>
        </template>
      </a-modal>
    </div>
    <FollowInfo ref="followInfoRef" />
    <ManaPlan ref="manaPlanRef" v-if="showDetail" @close="goBack" />
    <PatientInfo ref="patientInfoRef" v-if="showPatientInfo" @close="gopatientBack" />
  </div>
</template>
<script lang="ts" setup>
import Condition from '@/components/ConditionSearch/index.vue'
import {
  CheckCircleFilled,
  ExclamationCircleFilled,
  ArrowLeftOutlined,
  RightOutlined
} from '@ant-design/icons-vue'
import { ref, onMounted, reactive, h } from 'vue'
import dayjs from 'dayjs'
import { message } from 'ant-design-vue'
import {
  getDispatchList,
  getManagePlanByDiseaseType,
  getAllUser,
  batchDispatchApi,
  batchDispatchApiTuanJian,
  memberOrgPage
} from '@/api/healthManaWorkbench/index'
import { useRoute } from 'vue-router'
import store from '@/store'
const route = useRoute()

import ManaPlan from '../implement/manaPlan.vue'
import PatientInfo from '@/views/examinatePatients/patientInfo.vue'
import { imgroupPageMember } from '@/api/memberOrder/index'
import FollowInfo from '@/views/specializedDiseaseWorkbench/dispatch/followInfo.vue'

const emit = defineEmits(['close'])
const showDetail = ref(false)
const showPatientInfo = ref(false)
const breadcrumbShow = ref(true)
const zhuguanShow = ref(false)
const zuzhangShow = ref(false)
const loading = ref<boolean>(false)
const List = ref<any[]>([])
const raidoValue = ref('todo')
const state = reactive<{
  selectedRowKeys: Key[]
}>({
  selectedRowKeys: []
})
const managerData: any = ref([])
const managerDataOne: any = ref([])
const managerDataTwo: any = ref([])
const managerFormData: any = ref([])
const groupIdTwo: any = ref([])
const tabEnterpriseData: any = ref([
  {
    name: '个人',
    value: '1'
  },
  {
    name: '团队',
    value: '2'
  }
])
const tabEnterpriseDataActive = ref(0)
const enterpriseShow = ref(false)
const enterpriseShowThree = ref(true)
const breadcrumbList = ref([
  {
    name: '团队待分配',
    id: '1',
    isUrl: true
  }
])
const dispatchAllCounts = ref()
const dispatchOpen = ref(false)
const dispatchTitle = ref('')

const manaPathData = ref([])
const dispatchForm = reactive({
  dispatchUserId: undefined
})

const conditionTodo = ref([
  {
    title: '会员购买时间',
    dataIndex: 'buyTime',
    type: 'dayRange',
    value: [],
    format: 'YYYY-MM-DD HH:mm',
    showTime: true,
    style: { width: '300px' }
  },
  {
    title: '报告生成时间',
    dataIndex: 'visitTime',
    type: 'dayRange',
    value: [],
    format: 'YYYY-MM-DD HH:mm',
    showTime: true,
    style: { width: '300px' }
  },
  {
    title: '',
    dataIndex: 'condition',
    type: 'input',
    value: '',
    placeholder: '请输入姓名/证件号'
  },
  {
    title: '问卷状态',
    dataIndex: 'questionState',
    type: 'select',
    data: [
      {
        label: '未填写',
        value: false
      },
      {
        label: '已填写',
        value: true
      }
    ],
    value: undefined,
    placeholder: '请选择问卷状态'
  },
  {
    title: '管理路径',
    dataIndex: 'pathId',
    type: 'select',
    data: manaPathData.value,
    value: undefined,
    placeholder: '请选择管理路径',
    showSearch: true
  },
  {
    title: '会员状态',
    dataIndex: 'memberState',
    type: 'select',
    value: undefined,
    placeholder: '请选择会员状态',
    data: [
      {
        label: '生效中',
        value: 1
      },
      {
        label: '已中止',
        value: 4
      },
      {
        label: '已过期',
        value: 8
      }
    ]
  }
])
const conditionDone = ref([
  {
    title: '会员购买时间',
    dataIndex: 'buyTime',
    type: 'dayRange',
    value: [],
    format: 'YYYY-MM-DD HH:mm',
    showTime: true,
    style: { width: '300px' }
  },
  {
    title: '报告生成时间',
    dataIndex: 'visitTime',
    type: 'dayRange',
    value: [],
    format: 'YYYY-MM-DD HH:mm',
    showTime: true,
    style: { width: '300px' }
  },
  {
    title: '',
    dataIndex: 'condition',
    type: 'input',
    value: '',
    placeholder: '请输入姓名/证件号'
  },
  {
    title: '',
    dataIndex: 'manager',
    type: 'select',
    value: undefined,
    data: managerFormData.value,
    showSearch: true,
    placeholder: '请输入负责人'
  },
  {
    title: '管理路径',
    dataIndex: 'pathId',
    type: 'select',
    data: manaPathData.value,
    value: undefined,
    placeholder: '请选择管理路径',
    showSearch: true
  },
  {
    title: '问卷状态',
    dataIndex: 'questionState',
    type: 'select',
    data: [
      {
        label: '未填写',
        value: false
      },
      {
        label: '已填写',
        value: true
      }
    ],
    value: undefined,
    placeholder: '请选择问卷状态'
  },
  {
    title: '服务状态',
    dataIndex: 'serviceState',
    type: 'select',
    value: undefined,
    data: [
      {
        label: '待执行',
        value: 'TODO'
      },
      {
        label: '处理中',
        value: 'DOING'
      },
      {
        label: '已推送',
        value: 'DONE'
      }
    ],
    placeholder: '请选择服务状态'
  },
  {
    title: '会员状态',
    dataIndex: 'memberState',
    type: 'select',
    value: undefined,
    placeholder: '请选择会员状态',
    data: [
      {
        label: '生效中',
        value: 1
      },
      {
        label: '已中止',
        value: 4
      },
      {
        label: '已过期',
        value: 8
      }
    ]
  }
])

const condition = ref()
const conditionEnterprise = ref([])
const conditionTodoTwo = ref([
  {
    title: '会员购买时间',
    dataIndex: 'buyTime',
    type: 'dayRange',
    value: [],
    format: 'YYYY-MM-DD HH:mm',
    showTime: true,
    style: { width: '300px' }
  },
  {
    title: '报告生成时间',
    dataIndex: 'visitTime',
    type: 'dayRange',
    value: [],
    format: 'YYYY-MM-DD HH:mm',
    showTime: true,
    style: { width: '300px' }
  },
  {
    title: '',
    dataIndex: 'condition',
    type: 'input',
    value: '',
    placeholder: '请输入姓名/证件号'
  },
  {
    title: '问卷状态',
    dataIndex: 'questionState',
    type: 'select',
    data: [
      {
        label: '未填写',
        value: false
      },
      {
        label: '已填写',
        value: true
      }
    ],
    value: undefined,
    placeholder: '请选择问卷状态'
  },
  {
    title: '管理路径',
    dataIndex: 'pathId',
    type: 'select',
    data: manaPathData.value,
    value: undefined,
    placeholder: '请选择管理路径',
    showSearch: true
  },
  {
    title: '注册状态',
    dataIndex: 'isLogin',
    type: 'select',
    data: [
      {
        label: '未注册',
        value: false
      },
      {
        label: '已注册',
        value: true
      }
    ],
    value: undefined,
    placeholder: '请选择注册状态'
  },
  {
    title: '会员状态',
    dataIndex: 'memberState',
    type: 'select',
    value: undefined,
    placeholder: '请选择会员状态',
    data: [
      {
        label: '生效中',
        value: 1
      },
      {
        label: '已中止',
        value: 4
      },
      {
        label: '已过期',
        value: 8
      }
    ]
  }
])
const conditionDoneTwo = ref([
  {
    title: '会员购买时间',
    dataIndex: 'buyTime',
    type: 'dayRange',
    value: [],
    format: 'YYYY-MM-DD HH:mm',
    showTime: true,
    style: { width: '300px' }
  },
  {
    title: '报告生成时间',
    dataIndex: 'visitTime',
    type: 'dayRange',
    value: [],
    format: 'YYYY-MM-DD HH:mm',
    showTime: true,
    style: { width: '300px' }
  },
  {
    title: '',
    dataIndex: 'condition',
    type: 'input',
    value: '',
    placeholder: '请输入姓名/证件号'
  },
  {
    title: '问卷状态',
    dataIndex: 'questionState',
    type: 'select',
    data: [
      {
        label: '未填写',
        value: false
      },
      {
        label: '已填写',
        value: true
      }
    ],
    value: undefined,
    placeholder: '请选择问卷状态'
  },
  {
    title: '管理路径',
    dataIndex: 'pathId',
    type: 'select',
    data: manaPathData.value,
    value: undefined,
    placeholder: '请选择管理路径',
    showSearch: true
  },
  {
    title: '会员状态',
    dataIndex: 'memberState',
    type: 'select',
    value: undefined,
    placeholder: '请选择会员状态',
    data: [
      {
        label: '生效中',
        value: 1
      },
      {
        label: '已中止',
        value: 4
      },
      {
        label: '已过期',
        value: 8
      }
    ]
  }
])
const columnsTodoTwo = ref<any[]>([
  {
    title: '序号',
    dataIndex: 'no',
    key: 'no',
    align: 'left',
    width: 80
  },
  {
    title: '账号',
    dataIndex: 'userPhone',
    key: 'userPhone',
    align: 'left'
  },
  {
    title: '患者手机号',
    dataIndex: 'phone',
    key: 'phone',
    align: 'left'
  },
  {
    title: '患者',
    dataIndex: 'patName',
    key: 'patName',
    align: 'left'
  },
  //   {
  //     title: '性别',
  //     dataIndex: 'gender',
  //     key: 'gender',
  //     align: 'left'
  //   },
  //   {
  //     title: '年龄',
  //     dataIndex: 'age',
  //     key: 'age',
  //     align: 'left'
  //   },
  {
    title: '证件号',
    dataIndex: 'idNo',
    key: 'idNo',
    align: 'left'
  },
  {
    title: '会员状态',
    dataIndex: 'memberState',
    key: 'memberState',
    align: 'left'
  },
  {
    title: '会员有效期',
    dataIndex: 'buyTime',
    key: 'buyTime',
    align: 'left',
    width: 150
  },
  {
    title: '会员套餐',
    dataIndex: 'tradeName',
    key: 'tradeName',
    align: 'left'
  },
  {
    title: '报告生成时间',
    dataIndex: 'reportTime',
    key: 'reportTime',
    align: 'left'
  },
  {
    title: '注册状态',
    dataIndex: 'isLogin',
    key: 'isLogin',
    align: 'left'
  },
  {
    title: '管理路径',
    dataIndex: 'pathName',
    key: 'pathName',
    align: 'left'
  },
  {
    title: '问卷',
    dataIndex: 'questionnaireRecordId',
    key: 'questionnaireRecordId',
    align: 'left',
    width: 100
  }
  // {
  //   title: '问卷状态',
  //   dataIndex: 'questionState',
  //   key: 'questionState',
  //   align: 'left'
  // }
  // {
  //   title: '服务状态',
  //   dataIndex: 'state',
  //   key: 'state',
  //   align: 'left'
  // },
  //   {
  //     title: '操作',
  //     dataIndex: 'action',
  //     key: 'action',
  //     align: 'left',
  //     width: 150
  //   }
])

const columnsDoneTwo = ref<any[]>([
  {
    title: '序号',
    dataIndex: 'no',
    key: 'no',
    align: 'left',
    width: 80
  },
  {
    title: '账号',
    dataIndex: 'userPhone',
    key: 'userPhone',
    align: 'left'
  },
  {
    title: '患者手机号',
    dataIndex: 'phone',
    key: 'phone',
    align: 'left'
  },
  {
    title: '患者',
    dataIndex: 'patName',
    key: 'patName',
    align: 'left'
  },
  //   {
  //     title: '性别',
  //     dataIndex: 'gender',
  //     key: 'gender',
  //     align: 'left'
  //   },
  //   {
  //     title: '年龄',
  //     dataIndex: 'age',
  //     key: 'age',
  //     align: 'left'
  //   },
  {
    title: '证件号',
    dataIndex: 'idNo',
    key: 'idNo',
    align: 'left'
  },
  {
    title: '会员状态',
    dataIndex: 'memberState',
    key: 'memberState',
    align: 'left'
  },
  {
    title: '会员有效期',
    dataIndex: 'buyTime',
    key: 'buyTime',
    align: 'left',
    width: 150
  },
  {
    title: '会员套餐',
    dataIndex: 'tradeName',
    key: 'tradeName',
    align: 'left'
  },
  {
    title: '报告生成时间',
    dataIndex: 'reportTime',
    key: 'reportTime',
    align: 'left'
  },
  //   {
  //     title: '注册状态',
  //     dataIndex: 'isLogin',
  //     key: 'isLogin',
  //     align: 'left'
  //   },
  {
    title: '管理路径',
    dataIndex: 'pathName',
    key: 'pathName',
    align: 'left'
  },
  {
    title: '问卷',
    dataIndex: 'questionnaireRecordId',
    key: 'questionnaireRecordId',
    align: 'left',
    width: 100
  },
  // {
  //   title: '问卷状态',
  //   dataIndex: 'questionState',
  //   key: 'questionState',
  //   align: 'left'
  // },
  {
    title: '服务状态',
    dataIndex: 'serviceState',
    key: 'serviceState',
    align: 'left'
  },
  {
    title: '负责人',
    dataIndex: 'managerName',
    key: 'managerName',
    align: 'left'
  }
  // {
  //   title: '服务状态',
  //   dataIndex: 'state',
  //   key: 'state',
  //   align: 'left'
  // },
  //   {
  //     title: '操作',
  //     dataIndex: 'action',
  //     key: 'action',
  //     align: 'left',
  //     width: 150
  //   }
])
const columns = ref<any[]>([])
const columnsTodo = ref<any[]>([
  {
    title: '序号',
    dataIndex: 'no',
    key: 'no',
    align: 'left',
    width: 80
  },
  {
    title: '账号',
    dataIndex: 'userPhone',
    key: 'userPhone',
    align: 'left'
  },
  {
    title: '患者手机号',
    dataIndex: 'phone',
    key: 'phone',
    align: 'left'
  },
  {
    title: '患者',
    dataIndex: 'patName',
    key: 'patName',
    align: 'left'
  },
  //   {
  //     title: '性别',
  //     dataIndex: 'gender',
  //     key: 'gender',
  //     align: 'left'
  //   },
  //   {
  //     title: '年龄',
  //     dataIndex: 'age',
  //     key: 'age',
  //     align: 'left'
  //   },
  {
    title: '证件号',
    dataIndex: 'idNo',
    key: 'idNo',
    align: 'left'
  },
  {
    title: '会员状态',
    dataIndex: 'memberState',
    key: 'memberState',
    align: 'left'
  },
  {
    title: '会员有效期',
    dataIndex: 'buyTime',
    key: 'buyTime',
    align: 'left',
    width: 150
  },
  {
    title: '会员套餐',
    dataIndex: 'tradeName',
    key: 'tradeName',
    align: 'left'
  },
  {
    title: '报告生成时间',
    dataIndex: 'visitTime',
    key: 'visitTime',
    align: 'left'
  },
  {
    title: '管理路径',
    dataIndex: 'pathName',
    key: 'pathName',
    align: 'left'
  },
  {
    title: '问卷',
    dataIndex: 'questionnaireRecordId',
    key: 'questionnaireRecordId',
    align: 'left',
    width: 100
  },
  // {
  //   title: '问卷状态',
  //   dataIndex: 'questionState',
  //   key: 'questionState',
  //   align: 'left'
  // },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    align: 'left',
    width: 100
  }
])

const columnsDone = ref<any[]>([
  {
    title: '序号',
    dataIndex: 'no',
    key: 'no',
    align: 'left',
    width: 80
  },
  {
    title: '账号',
    dataIndex: 'userPhone',
    key: 'userPhone',
    align: 'left'
  },
  {
    title: '患者手机号',
    dataIndex: 'phone',
    key: 'phone',
    align: 'left'
  },
  {
    title: '患者',
    dataIndex: 'patName',
    key: 'patName',
    align: 'left'
  },
  //   {
  //     title: '性别',
  //     dataIndex: 'gender',
  //     key: 'gender',
  //     align: 'left'
  //   },
  //   {
  //     title: '年龄',
  //     dataIndex: 'age',
  //     key: 'age',
  //     align: 'left'
  //   },
  {
    title: '证件号',
    dataIndex: 'idNo',
    key: 'idNo',
    align: 'left'
  },
  {
    title: '会员状态',
    dataIndex: 'memberState',
    key: 'memberState',
    align: 'left'
  },
  {
    title: '会员有效期',
    dataIndex: 'buyTime',
    key: 'buyTime',
    align: 'left',
    width: 150
  },
  {
    title: '会员套餐',
    dataIndex: 'tradeName',
    key: 'tradeName',
    align: 'left'
  },
  {
    title: '报告生成时间',
    dataIndex: 'visitTime',
    key: 'visitTime',
    align: 'left'
  },

  {
    title: '管理路径',
    dataIndex: 'pathName',
    key: 'pathName',
    align: 'left'
  },
  {
    title: '问卷',
    dataIndex: 'questionnaireRecordId',
    key: 'questionnaireRecordId',
    align: 'left',
    width: 100
  },
  // {
  //   title: '问卷状态',
  //   dataIndex: 'questionState',
  //   key: 'questionState',
  //   align: 'left'
  // },
  {
    title: '服务状态',
    dataIndex: 'serviceState',
    key: 'serviceState',
    align: 'left'
  },
  {
    title: '负责人',
    dataIndex: 'managerName',
    key: 'managerName',
    align: 'left'
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    align: 'left',
    width: 100
  }
])

const pagination = ref<any>({
  current: 1,
  total: 0,
  pageSize: 10,
  showSizeChanger: true,
  pageSizeOptions: ['10', '20', '50', '100'],
  showQuickJumper: true
})
const paginationChange = (page: any) => {
  pagination.value = { ...page }
  loading.value = true
  getDataList()
}

const onSelectChange = (selectedRowKeys: Key[]) => {
  state.selectedRowKeys = selectedRowKeys
}
// 待办列表 多选
const getCheckboxProps = (record) => ({
  disabled: !record.isLogin
})

const manaPlanRef = ref()
const peOrgId = ref()
const groupNameTwo = ref()
const addOrUpdateHandle = (data) => {
  showDetail.value = true
  nextTick(() => {
    manaPlanRef.value.init(data)
  })
}
const getDataList = () => {
  state.selectedRowKeys = []
  List.value = []
  let obj = {}
  if (tabEnterpriseDataActive.value == 0) {
    obj = condition.value.reduce((c, v) => {
      if (v.value || v.value === 0 || v.value === false) {
        if (v.dataIndex == 'visitTime') {
          return Object.assign(c, {
            visitTimeSta: v.value.length ? dayjs(v.value[0]).format('YYYY-MM-DD HH:mm:00') : '',
            visitTimeEnd: v.value.length ? dayjs(v.value[1]).format('YYYY-MM-DD HH:mm:00') : ''
          })
        } else if (v.dataIndex == 'buyTime') {
          return Object.assign(c, {
            buyTimeSta: v.value.length ? dayjs(v.value[0]).format('YYYY-MM-DD HH:mm:00') : '',
            buyTimeEnd: v.value.length ? dayjs(v.value[1]).format('YYYY-MM-DD HH:mm:00') : ''
          })
        } else {
          return Object.assign(c, { [v.dataIndex]: v.value })
        }
      } else {
        return c
      }
    }, {})
    getDispatchList({
      ...obj,
      serviceState: obj.serviceState ? [obj.serviceState] : [],
      page: pagination.value.current,
      limit: pagination.value.pageSize,
      isSet: raidoValue.value == 'todo' ? false : true,
      chose: true
    })
      .then((res) => {
        dispatchAllCounts.value = res.data
        List.value = res.data.page.list
        pagination.value.total = res.data.page.total
        loading.value = false

        List.value = [...List.value]
      })
      .catch(() => {
        loading.value = false
      })
  } else {
    obj = conditionEnterprise.value.reduce((c, v) => {
      if (v.value || v.value === 0 || v.value === false) {
        if (v.dataIndex == 'visitTime') {
          return Object.assign(c, {
            visitTimeSta: v.value.length ? dayjs(v.value[0]).format('YYYY-MM-DD HH:mm:00') : '',
            visitTimeEnd: v.value.length ? dayjs(v.value[1]).format('YYYY-MM-DD HH:mm:00') : ''
          })
        } else if (v.dataIndex == 'buyTime') {
          return Object.assign(c, {
            buyTimeSta: v.value.length ? dayjs(v.value[0]).format('YYYY-MM-DD HH:mm:00') : '',
            buyTimeEnd: v.value.length ? dayjs(v.value[1]).format('YYYY-MM-DD HH:mm:00') : ''
          })
        } else {
          return Object.assign(c, { [v.dataIndex]: v.value })
        }
      } else {
        return c
      }
    }, {})
    memberOrgPage({
      ...obj,
      serviceState: obj.serviceState ? [obj.serviceState] : [],
      page: pagination.value.current,
      isSet: raidoValue.value == 'todo' ? false : true,
      limit: pagination.value.pageSize,
      diseaseType: 'peCheck',
      chose: true,
      peOrgId: peOrgId.value,
      isManager: zhuguanShow.value,
      isLeader: zuzhangShow.value
      //   peOrgId: '56'
    })
      .then((res) => {
        dispatchAllCounts.value = res.data
        List.value = res.data.page.list
        pagination.value.total = res.data.page.total
        loading.value = false
        List.value = [...List.value]
      })
      .catch(() => {
        loading.value = false
      })
  }
}
const initRouterInfo = async (data, tabName, tabIndex, zuzhangShows) => {
  if (store.userApp.permissionList.indexOf('eprofile:pe:zhuguan') != -1) {
    zhuguanShow.value = true
  } else {
    zhuguanShow.value = false
  }
  breadcrumbShow.value = true
  peOrgId.value = data.peOrgId
  groupIdTwo.value = data.groupId
  groupNameTwo.value = data.groupName
  managerData.value = []
  managerDataOne.value = []
  managerDataTwo.value = []
  managerFormData.value = []
  loading.value = true
  columns.value = []
  condition.value = []
  tabEnterpriseDataActive.value = tabIndex
  //   raidoValue.value = tabName
  raidoValue.value = 'todo'
  enterpriseShowThree.value = true
  enterpriseShow.value = false
  zuzhangShow.value = zuzhangShows
  //   conditionEnterprise.value = []
  conditionEnterprise.value = conditionTodoTwo.value

  await getManaPath()
  if (tabEnterpriseDataActive.value == 1) {
    await imgroupPageMember({
      groupId: data.groupId,
      page: pagination.value.current,
      limit: pagination.value.pageSize
    })
      .then((res) => {
        managerDataTwo.value = []
        res.data.list.forEach((item) => {
          managerDataTwo.value.push({
            value: item.memberId,
            label: item.memberName + '  ' + item.workCategory + '  ' + item.phone
          })
          managerData.value = managerDataTwo.value
          managerFormData.value.push({
            value: item.memberId,
            label: item.memberName + '  ' + item.workCategory + '  ' + item.phone
          })
        })
      })
      .catch(() => {
        //   loading.value = false
      })
  } else {
    await getAllUser().then(async (res) => {
      managerDataOne.value = []
      res.data.forEach((item) => {
        managerDataOne.value.push({
          value: item.id,
          label: item.realName + ' ' + item.workerCategory + ' ' + item.mobile
        })
        managerData.value = managerDataOne.value
        managerFormData.value.push({
          value: item.id,
          label: item.realName
        })
      })
    })
  }
  if (raidoValue.value == 'todo') {
    breadcrumbList.value = [
      {
        name: '团队待分配',
        id: '1',
        isUrl: true
      }
    ]
    // conditionTodoTwo.value[3].data = managerFormData.value
    columnsTodoTwo.value = [...columnsTodoTwo.value]
  } else {
    breadcrumbList.value = [
      {
        name: '团队已派单',
        id: '1',
        isUrl: true
      }
    ]
    // conditionDoneTwo.value[3].data = managerFormData.value
    columnsDoneTwo.value = [...columnsTodoTwo.value]
  }
  breadcrumbList.value.push({
    name: data.peOrgName,
    id: '2',
    isUrl: false
  })
  conditionEnterprise.value = []
  if (zuzhangShows == true) {
    enterpriseShow.value = true
    columnsTodoTwo.value.push({
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      align: 'left',
      width: 100
    })
    if (raidoValue.value == 'todo') {
      columns.value = [...columns.value, ...columnsTodoTwo.value]
      //   conditionEnterprise.value = []
      conditionEnterprise.value = [...conditionEnterprise.value, ...conditionTodoTwo.value]
    } else {
      columns.value = [...columns.value, ...columnsDoneTwo.value]
      //   conditionEnterprise.value = []
      conditionEnterprise.value = [...conditionEnterprise.value, ...conditionDoneTwo.value]
    }
    // columns.value = [...columns.value, ...columnsTodoTwo.value]
    // conditionEnterprise.value = [...conditionEnterprise.value, ...conditionTodoTwo.value]
  } else {
    enterpriseShow.value = false
    if (raidoValue.value == 'todo') {
      columns.value = [...columns.value, ...columnsTodoTwo.value]
      //   conditionEnterprise.value = []
      conditionEnterprise.value = [...conditionEnterprise.value, ...conditionTodoTwo.value]
    } else {
      columns.value = [...columns.value, ...columnsDoneTwo.value]
      //   conditionEnterprise.value = []
      conditionEnterprise.value = [...conditionEnterprise.value, ...conditionDoneTwo.value]
    }
  }
  getDataList()
}
const getManaPath = async () => {
  await getManagePlanByDiseaseType({
    diseaseType: 'checkAfter'
  }).then((res) => {
    if (res.data && res.data.length > 0) {
      res.data.map((item) => {
        item.label = item.managePathName
        item.value = item.id
      })
      manaPathData.value = res.data
    } else {
      manaPathData.value = []
    }
    conditionTodo.value[4].data = manaPathData.value
    conditionDone.value[4].data = manaPathData.value
    conditionTodoTwo.value[4].data = manaPathData.value
    conditionDoneTwo.value[4].data = manaPathData.value
  })
}
const containsObject = (array, obj) => {
  return array.some(function (element) {
    return element.key === obj.key
  })
}
// 个人和企业切换
const tabEnterpriseDataCli = (item, index) => {
  conditionEnterprise.value = []
  condition.value = []
  columns.value = []
  if (index == 0) {
    breadcrumbShow.value = false
    managerData.value = managerDataOne.value
    enterpriseShowThree.value = false
    enterpriseShow.value = true
    if (raidoValue.value == 'todo') {
      columns.value = [...columns.value, ...columnsTodo.value]
      condition.value = [...condition.value, ...conditionTodo.value]
    } else {
      columns.value = [...columns.value, ...columnsDone.value]
      condition.value = [...condition.value, ...conditionDone.value]
    }
  } else {
    breadcrumbShow.value = true
    managerData.value = managerDataTwo.value
    enterpriseShowThree.value = true
    const objToFind = {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      align: 'left',
      width: 100
    }
    if (zuzhangShow.value == true) {
      enterpriseShow.value = true
      if (raidoValue.value == 'todo') {
        if (containsObject(columnsTodoTwo.value, objToFind) == false) {
          columnsTodoTwo.value.push({
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            align: 'left',
            width: 100
          })
        }
        columns.value = [...columns.value, ...columnsTodoTwo.value]
        conditionEnterprise.value = [...conditionEnterprise.value, ...conditionTodoTwo.value]
      } else {
        if (containsObject(columnsDoneTwo.value, objToFind) == false) {
          columnsDoneTwo.value.push({
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            align: 'left',
            width: 100
          })
        }
        columns.value = [...columns.value, ...columnsDoneTwo.value]
        conditionEnterprise.value = [...conditionEnterprise.value, ...conditionDoneTwo.value]
      }
    } else {
      enterpriseShow.value = false
      if (raidoValue.value == 'todo') {
        columns.value = [...columns.value, ...columnsTodoTwo.value]
        conditionEnterprise.value = [...conditionEnterprise.value, ...conditionTodoTwo.value]
      } else {
        columns.value = [...columns.value, ...columnsDoneTwo.value]
        conditionEnterprise.value = [...conditionEnterprise.value, ...conditionDoneTwo.value]
      }
    }
  }
  tabEnterpriseDataActive.value = index
  reset()
}

// 患者详情
const patientInfoRef = ref()
const toDetail = (data) => {
  showPatientInfo.value = true
  nextTick(() => {
    patientInfoRef.value.initRouterInfo(data)
  })
}

const searchHandle = () => {
  pagination.value.current = 1
  loading.value = true
  getDataList()
}
const reset = async () => {
  managerFormData.value = []
  pagination.value.current = 1
  pagination.value.pageSize = 10
  getManaPath()
  if (tabEnterpriseDataActive.value == 1) {
    await imgroupPageMember({
      groupId: groupIdTwo.value,
      page: pagination.value.current,
      limit: pagination.value.pageSize
    })
      .then((res) => {
        managerDataTwo.value = []
        res.data.list.forEach((item) => {
          managerDataTwo.value.push({
            value: item.memberId,
            label: item.memberName + '  ' + item.workCategory + '  ' + item.phone
          })
          managerData.value = managerDataTwo.value
          managerFormData.value.push({
            value: item.memberId,
            label: item.memberName + '  ' + item.workCategory + '  ' + item.phone
          })
        })
      })
      .catch(() => {
        //   loading.value = false
      })
  } else {
    getAllUser().then((res) => {
      managerDataOne.value = []
      res.data.forEach((item) => {
        managerDataOne.value.push({
          value: item.id,
          label: item.realName + ' ' + item.workerCategory + ' ' + item.mobile
        })
        managerData.value = managerDataOne.value
        managerFormData.value.push({
          value: item.id,
          label: item.realName
        })
      })
    })
  }
  conditionDone.value[3].data = managerFormData.value
  conditionDone.value = [...conditionDone.value]
  condition.value.map((v) => {
    if (v.type === 'select') {
      v.value = undefined
    } else if (v.type === 'dayRange') {
      v.value = []
    } else {
      v.value = ''
    }
  })
  conditionEnterprise.value.map((v) => {
    if (v.type === 'select') {
      v.value = undefined
    } else if (v.type === 'dayRange') {
      v.value = []
    } else {
      v.value = ''
    }
  })
  loading.value = true
  getDataList()
}

const isDispatchData: any = ref([])

const dispatchFormRef = ref()
// 批量派单
const batchDispatch = () => {
  isDispatchData.value = []
  if (state.selectedRowKeys.length) {
    dispatchOpen.value = true
    dispatchTitle.value = '批量派单'
    dispatchForm.dispatchUserId = undefined
    isDispatchData.value = List.value.filter((item) => {
      return state.selectedRowKeys.includes(item.empi)
    })
  } else {
    message.warning('请选择需要派单的记录')
  }
}
// 批量转单
const batchTransfer = () => {
  isDispatchData.value = []
  if (state.selectedRowKeys.length) {
    dispatchOpen.value = true
    dispatchTitle.value = '批量转单'
    dispatchForm.dispatchUserId = undefined
    isDispatchData.value = List.value.filter((item) => {
      return state.selectedRowKeys.includes(item.empi)
    })
  } else {
    message.warning('请选择需要转单的记录')
  }
}

// 单条记录操作
const dispatchHandle = (data) => {
  //   if (tabEnterpriseDataActive.value == 1) {
  //     loading.value = true
  //     // imgroupPageMember({
  //     //   groupId: groupObj.value.groupId,
  //     //   page: pagination.value.current,
  //     //   limit: pagination.value.pageSize
  //     // })
  //     //   .then((res) => {
  //     //     // List.value = res.data.list
  //     //     // pagination.value.total = res.data.total
  //     //     // loading.value = false
  //     //   })
  //     //   .catch(() => {
  //     //     loading.value = false
  //     //   })
  //   } else {
  if (data.isLogin != true) {
    if (zuzhangShow.value && enterpriseShowThree.value) {
      message.warning('该患者未注册')
      return false
    }
  }
  isDispatchData.value = [data]
  dispatchOpen.value = true
  dispatchForm.dispatchUserId = undefined
  if (raidoValue.value == 'todo') {
    dispatchTitle.value = '派单'
  } else {
    dispatchTitle.value = '转单'
  }
  return true
  //   }
}

const dispatchLoading = ref(false)
// 派单 转单操作
const saveHandle = () => {
  dispatchFormRef.value.validate().then(() => {
    dispatchLoading.value = true
    if (tabEnterpriseDataActive.value == 0) {
      isDispatchData.value.forEach((item) => {
        item.manager = dispatchForm.dispatchUserId
      })
      batchDispatchApi(isDispatchData.value)
        .then((res) => {
          dispatchLoading.value = false
          message.success(`${raidoValue.value === 'todo' ? '派单' : '转单'}成功`)
          dispatchOpen.value = false
          if (raidoValue.value === 'todo') {
            searchHandle()
          } else {
            loading.value = true
            getDataList()
          }
        })
        .catch(() => {
          dispatchLoading.value = false
        })
    } else {
      isDispatchData.value.forEach((item) => {
        item.manager = dispatchForm.dispatchUserId
        item.groupName = groupNameTwo.value
        item.groupId = groupIdTwo.value
        item.scenesActionType = raidoValue.value === 'todo' ? 'DISPATCH_ORDER' : 'CONVERT_ORDER'
      })
      batchDispatchApiTuanJian(isDispatchData.value)
        .then((res) => {
          dispatchLoading.value = false
          message.success(`${raidoValue.value === 'todo' ? '派单' : '转单'}成功`)
          dispatchOpen.value = false
          if (raidoValue.value === 'todo') {
            searchHandle()
          } else {
            loading.value = true
            getDataList()
          }
        })
        .catch(() => {
          dispatchLoading.value = false
        })
    }
  })
}

const radioValueChange = (e) => {
  columns.value = []
  condition.value = []
  conditionEnterprise.value = []
  const objToFind = {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    align: 'left',
    width: 100
  }
  if (tabEnterpriseDataActive.value == 0) {
    managerData.value = managerDataOne.value
    enterpriseShowThree.value = false
    enterpriseShow.value = true
    if (e.target.value == 'done') {
      columns.value = [...columns.value, ...columnsDone.value]
      condition.value = [...condition.value, ...conditionDone.value]
    } else {
      columns.value = [...columns.value, ...columnsTodo.value]
      condition.value = [...condition.value, ...conditionTodo.value]
    }
  } else {
    managerData.value = managerDataTwo.value
    enterpriseShowThree.value = true
    if (zuzhangShow.value == true) {
      enterpriseShow.value = true
      if (e.target.value == 'done') {
        if (containsObject(columnsDoneTwo.value, objToFind) == false) {
          columnsDoneTwo.value.push({
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            align: 'left',
            width: 100
          })
        }

        columns.value = [...columns.value, ...columnsDoneTwo.value]
        conditionEnterprise.value = [...conditionEnterprise.value, ...conditionDoneTwo.value]
      } else {
        if (containsObject(columnsTodoTwo.value, objToFind) == false) {
          columnsTodoTwo.value.push({
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            align: 'left',
            width: 100
          })
        }
        columns.value = [...columns.value, ...columnsTodoTwo.value]
        conditionEnterprise.value = [...conditionEnterprise.value, ...conditionTodoTwo.value]
      }
    } else {
      enterpriseShow.value = false
      if (e.target.value == 'done') {
        columns.value = [...columns.value, ...columnsDoneTwo.value]
        conditionEnterprise.value = [...conditionEnterprise.value, ...conditionDoneTwo.value]
      } else {
        columns.value = [...columns.value, ...columnsTodoTwo.value]
        conditionEnterprise.value = [...conditionEnterprise.value, ...conditionTodoTwo.value]
      }
    }
  }
  reset()
}

const followInfoRef = ref()
const questionAnswerForm = (data) => {
  const params = {
    questionnaireRecordId: data.questionnaireRecordId,
    empi: data.empi
  }
  followInfoRef.value.init(params)
}

const goBack = () => {
  showDetail.value = false
  loading.value = true
  getDataList()
}

const gopatientBack = () => {
  showPatientInfo.value = false
  loading.value = true
  getDataList()
}
const resetBack = () => {
  //   router.replace({ query: {} })
  //   activeKey.value = '1'
  emit('closed')
}
defineExpose({
  initRouterInfo
})
</script>
<style lang="less" scoped>
.box-main {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  overflow: hidden !important;

  .topHeaderCard {
    display: flex;
    align-items: center;
    width: 100%;

    ::v-deep(.breadcrumb) {
      height: 40px;
      padding-left: 24px;
      line-height: 40px;

      li {
        .ant-breadcrumb-link {
          color: #4e5969;
        }

        &:nth-child(1) {
          .ant-breadcrumb-link {
            &:hover {
              color: #165dff;
              cursor: pointer;
            }
          }
        }

        &:nth-child(2) {
          .ant-breadcrumb-link {
            span {
              font-weight: 700;
              color: #1d2129;
            }
          }
        }
      }

      span {
        &:nth-child(2) {
          font-weight: 700;
          color: #1d2129;
        }

        &.on:hover {
          color: #165dff;
          cursor: pointer;
        }
      }
    }

    ::v-deep(.ant-tabs-nav) {
      margin: 0;
    }

    ::v-deep(.ant-tabs-nav-wrap) {
      height: 48px;
      padding: 0 20px;
      padding-top: 2px;
    }
  }

  .header {
    display: flex;
    justify-content: space-between;

    .tabEnterprise {
      position: relative;
      // padding-bottom: 16px;
      margin-bottom: 16px;

      p {
        display: inline-block;
        width: 60px;
        height: 32px;
        margin: 0;
        margin-right: 4px;
        font-size: 14px;
        line-height: 32px;
        color: #4e5969;
        text-align: center;
        vertical-align: middle;
        background: #f7f8fa;
        border: 1px solid #e5e6eb;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;

        &.on {
          position: relative;
          z-index: 1;
          font-weight: 700;
          color: #165dff;
          background: #fff;
          border-bottom: 0;
        }

        &:hover {
          cursor: pointer;
          opacity: 0.8;
        }
      }

      &::after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        content: '';
        border-bottom: 1px solid #e5e6eb;
      }
    }
  }

  .main {
    flex: 1 1 auto;
    margin-top: 16px;
    overflow: hidden auto;

    .patName {
      color: #1677ff;

      &:hover {
        cursor: pointer;
        opacity: 0.7;
      }
    }
  }

  .page-content {
    padding: 16px;

    &.on {
      height: calc(100% - 40px);
      padding: 0 16px 16px;
    }

    .page-content-Wrap {
      width: 100%;
      height: 100%;
    }

    .page-content-Wrap-two {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
